<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" highlight-current-row>
      <!-- 总订单 -->
      <el-tab-pane label="总订单" name="first">
        <template>
          <el-table :data="data" max-height="545" border style="width: 100%">
            <el-table-column fixed prop="_id" label="订单编号" width="70"> </el-table-column>
            <el-table-column prop="address.name" label="收货人姓名" width="100"> </el-table-column>
            <el-table-column prop="address.tel" label="手机号码" width="120"> </el-table-column>
            <el-table-column label="收货地址" width="150">
              <template v-slot="scope">
                <span
                  >{{ scope.row.address.province }}
                  {{ scope.row.address.city }}
                  {{ scope.row.address.county }}
                  {{ scope.row.address.addressDetail }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="0.name" label="商品" width="300"> </el-table-column>
            <el-table-column label="商品图片" width="100">
              <template v-slot="scope">
                <img style="width: 80px; height: 80px" :src="scope.row[0].mainImage" />
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
              <template v-slot="scope">
                <span>{{ scope.row[0].price / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column prop="0.qty" label="数量" width="100"> </el-table-column>
            <el-table-column label="总额" width="100">
              <template v-slot="scope">
                <span>{{ (scope.row[0].price * scope.row[0].qty) / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template v-slot="scope">
                <el-tag v-if="scope.row.state == '未发货'" type="danger"
                  >{{ scope.row.state }}
                </el-tag>
                <el-tag v-if="scope.row.state == '已发货'" type="warning"
                  >{{ scope.row.state }}
                </el-tag>
                <el-tag v-if="scope.row.state == '已完成'" type="success"
                  >{{ scope.row.state }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="未发货" name="second">
        <template>
          <el-table :data="nofahuo" max-height="545" border style="width: 100%">
            <el-table-column fixed prop="_id" label="订单编号" width="70"> </el-table-column>
            <el-table-column prop="address.name" label="收货人姓名" width="100"> </el-table-column>
            <el-table-column prop="address.tel" label="手机号码" width="120"> </el-table-column>

            <el-table-column label="收货地址" width="150">
              <template v-slot="scope">
                <span
                  >{{ scope.row.address.province }}
                  {{ scope.row.address.city }}
                  {{ scope.row.address.county }}
                  {{ scope.row.address.addressDetail }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="0.name" label="商品" width="300"> </el-table-column>
            <el-table-column label="商品图片" width="100">
              <template v-slot="scope">
                <img style="width: 80px; height: 80px" :src="scope.row[0].mainImage" />
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
              <template v-slot="scope">
                <span>{{ scope.row[0].price / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column prop="0.qty" label="数量" width="100"> </el-table-column>
            <el-table-column label="总额" width="100">
              <template v-slot="scope">
                <span>{{ (scope.row[0].price * scope.row[0].qty) / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template v-slot="scope"
                ><el-button type="danger" @click="shipments(scope.row)" size="small" round>{{
                  scope.row.state
                }}</el-button></template
              >
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="已发货" name="third">
        <template>
          <el-table :data="yifahuo" max-height="545" border style="width: 100%">
            <el-table-column fixed prop="_id" label="订单编号" width="70"> </el-table-column>
            <el-table-column prop="address.name" label="收货人姓名" width="100"> </el-table-column>
            <el-table-column prop="address.tel" label="手机号码" width="120"> </el-table-column>

            <el-table-column label="收货地址" width="150">
              <template v-slot="scope">
                <span
                  >{{ scope.row.address.province }}
                  {{ scope.row.address.city }}
                  {{ scope.row.address.county }}
                  {{ scope.row.address.addressDetail }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="0.name" label="商品" width="300"> </el-table-column>
            <el-table-column label="商品图片" width="100">
              <template v-slot="scope">
                <img style="width: 80px; height: 80px" :src="scope.row[0].mainImage" />
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
              <template v-slot="scope">
                <span>{{ scope.row[0].price / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column prop="0.qty" label="数量" width="100"> </el-table-column>
            <el-table-column label="总额" width="100">
              <template v-slot="scope">
                <span>{{ (scope.row[0].price * scope.row[0].qty) / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template v-slot="scope"
                ><el-button type="danger" @click="received(scope.row)" size="small" round>{{
                  scope.row.state
                }}</el-button></template
              >
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="已完成订单" name="fourth">
        <template>
          <el-table :data="yiwancheng" max-height="545" border style="width: 100%">
            <el-table-column fixed prop="_id" label="订单编号" width="70"> </el-table-column>
            <el-table-column prop="address.name" label="收货人姓名" width="100"> </el-table-column>
            <el-table-column prop="address.tel" label="手机号码" width="120"> </el-table-column>

            <el-table-column label="收货地址" width="150">
              <template v-slot="scope">
                <span
                  >{{ scope.row.address.province }}
                  {{ scope.row.address.city }}
                  {{ scope.row.address.county }}
                  {{ scope.row.address.addressDetail }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="0.name" label="商品" width="300"> </el-table-column>
            <el-table-column label="商品图片" width="100">
              <template v-slot="scope">
                <img style="width: 80px; height: 80px" :src="scope.row[0].mainImage" />
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
              <template v-slot="scope">
                <span>{{ scope.row[0].price / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column prop="0.qty" label="数量" width="100"> </el-table-column>
            <el-table-column label="总额" width="100">
              <template v-slot="scope">
                <span>{{ (scope.row[0].price * scope.row[0].qty) / 100 }}￥</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template v-slot="scope"
                ><el-tag>{{ scope.row.state }}</el-tag></template
              >
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "Order",
  data() {
    return {
      //总订单
      data: [],
      //未发货
      nofahuo: [],
      //已发货
      yifahuo: [],
      //已完成
      yiwancheng: [],
      activeName: "first",
    };
  },
  async created() {
    await this.$store.dispatch("render");
    this.data = this.$store.state.order.ret.data;
    console.log(this.data);
    // console.log(this.$store);
    // console.log(this.$store.state.order.ret);
  },
  mounted() {
    console.log(this.$store);
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name);
      switch (tab.name) {
        case "second":
          this.$request
            .post("/order/selecstate", {
              page: 1,
              size: 30,
              state: "未发货",
            })
            .then((res) => {
              // console.log(res.data.ret);
              this.nofahuo = res.data.ret.data;
              // console.log(this.nofahuo);
            });
          break;
        case "third":
          this.$request
            .post("/order/selecstate", {
              page: 1,
              size: 30,
              state: "已发货",
            })
            .then((res) => {
              // console.log(res.data.ret);
              this.yifahuo = res.data.ret.data;
              // console.log(this.nofahuo);
            });
          break;
        case "fourth":
          this.$request
            .post("/order/selecstate", {
              page: 1,
              size: 30,
              state: "已完成",
            })
            .then((res) => {
              // console.log(res.data.ret);
              this.yiwancheng = res.data.ret.data;
              // console.log(this.nofahuo);
            });
      }
    },
    async shipments(a) {
      console.log(a);
      console.log(a.state);
      console.log(a._id);
      await this.$request
        .put("/order/updataorder", {
          orderid: a.orderid,
          date: {
            state: "已发货",
          },
        })
        .then((res) => {
          console.log(res);
        });
      this.$request
        .post("/order/selecstate", {
          page: 1,
          size: 30,
          state: "未发货",
        })
        .then((res) => {
          // console.log(res.data.ret);
          this.nofahuo = res.data.ret.data;
          // console.log(this.nofahuo);
        });
    },
    async received(a) {
      console.log(a);
      console.log(a.state);
      console.log(a._id);
      await this.$request
        .put("/order/updataorder", {
          orderid: a.orderid,
          date: {
            state: "已完成",
          },
        })
        .then((res) => {
          console.log(res);
        });
        this.$request
            .post("/order/selecstate", {
              page: 1,
              size: 30,
              state: "已发货",
            })
            .then((res) => {
              // console.log(res.data.ret);
              this.yifahuo = res.data.ret.data;
              // console.log(this.nofahuo);
            });
    },
    abc() {
      console.log(1);
    },
    render() {
      console.log(this.$store.state.order.ret);
      return this.$store.state.order.ret;
    },
  },
  //点击发货

  computed: {
    //渲染总订单
  },
};
</script>
